<template>
  <div class="warp">
    <!-- 粒子特效 -->
    <Particles
      id="tsparticles"
      :options="{
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: 'push',
            },
            onHover: {
              enable: true,
              mode: 'repulse',
            },
            resize: true,
          },
        },
        particles: {
          color: {
            value: '#8DD1FE',
          },
          links: {
            color: '#8DD1FE',
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1,
          },
          collisions: {
            enable: true,
          },
          move: {
            direction: 'none',
            enable: true,
            outMode: 'bounce',
            random: false,
            straight: false,
          },
          number: {
            density: {
              enable: true,
              area: 800,
            },
            value: 80,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: 'circle',
          },
          size: {
            random: true,
            value: 5,
          },
        },
        detectRetina: true,
      }"
    />
    <div class="login-container">
      <div class="head flex just-center align-center">
        <div class="name">
          <div class="title">后台</div>
        </div>
      </div>
      <el-form
        label-position="top"
        :rules="rules"
        :model="form"
        ref="loginForm"
        class="login-form"
      >
        <el-form-item label="账号" prop="account">
          <el-input
            type="text"
            v-model.trim="form.account"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model.trim="form.password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item class="mt30">
          <el-button style="width: 100%" type="primary" @click="submitForm">
            立即登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import { localSet } from "@/utils";
import axios from "@/utils/axios";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
export default {
  name: "Login",
  setup() {
    //引用全局变量
    const store = useStore();
    const router = useRouter();
    const loginForm = ref(null);
    const state = reactive({
      form: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          { required: "true", message: "账户不能为空", trigger: "blur" },
        ],
        password: [
          { required: "true", message: "密码不能为空", trigger: "blur" },
        ],
      },
    });
    //登录
    const submitForm = () => {
      loginForm.value.validate((valid) => {
        if (valid) {
          // 静态模拟登录成功
          let userInfo = { nickname: "admin" };
          //存储到vuex
          store.commit("setToken", "token123456789");
          store.commit("setUserInfo", userInfo);
          //储存到缓存
          localSet("token", "token123456789");
          localSet("userInfo", userInfo);
          ElMessage({
            type: "success",
            message: "登录成功",
          });
          router.push("/");
          //登录接口--请求
          // axios.post("/manage/index/login", state.form).then((res) => {
          //   let userInfo = { nickname: res.data.nickname };
          //   store.commit("setToken", res.data.token);
          //   store.commit("setUserInfo", userInfo);
          //   localSet("token", res.data.token);
          //   localSet("userInfo", userInfo);
          //   ElMessage({
          //     type: "success",
          //     message: "登录成功",
          //   });
          //   router.push("/");
          // });
        }
      });
    };
    return {
      ...toRefs(state),
      loginForm,
      submitForm,
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  height: 100%;
  width: 100%;
  background: rgb(0, 58, 182);
  background-size: 100% 100%;
}
.login-container {
  position: absolute;
  width: 420px;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  padding: 40px 0;
  left: calc(50% - 210px);
  top: calc(50% - 200px);
  .head {
    .title {
      font-size: 28px;
      color: white;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
  .login-form {
    width: 70%;
    margin: 0 auto;
    .el-form-item {
      margin-bottom: 10px;
    }
    :deep() {
      .el-input__inner {
        background: none !important;
        color: white;
      }
    }
  }
  :deep(.el-form-item__label) {
    color: #eee;
    padding: 0;
  }
}
</style>